<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <account-search @search="reload"  />
    <!-- 数据表格 -->
    <el-card shadow="never">
      <ele-pro-table
        ref="table"  row-key="id" :columns="columns" :datasource="datasource" 
        :need-page="true"  @done="onDone"
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit({},'1')"
          >
            添加
          </el-button>
          <el-button
            size="small"
            icon="el-icon-upload2"
            class="ele-btn-icon"
            @click="reportexcel"
          >
            导出
          </el-button>
        </template>
        <!-- 标题列 -->
        <template slot="title" slot-scope="{ row }">
          <i :class="row.icon"></i> {{ row.title }}
        </template>
          <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }"  >
          <el-link type="primary" :underline="false" icon="el-icon-view"  @click="openEdit(row,'3')">详情</el-link>
          <el-link type="primary"  v-any-role="['JS01','JS00']" :underline="false"  icon="el-icon-edit"  @click="openEdit(row,'2')" >修改</el-link>
          <el-popconfirm v-if="row.isSys!=1" class="ele-action" title="确定要删除吗？"  @confirm="remove(row)" >
            <el-link type="danger" slot="reference" v-any-role="['JS01','JS00']" :underline="false"  icon="el-icon-delete" >删除</el-link>
          </el-popconfirm>
          <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' class="ele-action"  @confirm="resetPass(row)" title="确定重置密码吗？">
            <el-link type="warning"  :underline="false" slot="reference" icon="el-icon-lock"  >重置密码</el-link>
          </el-popconfirm>
          <el-link type="primary"  :underline="false"  icon="el-icon-edit" @click="creatQrCode(row)" >生成二维码</el-link>
      </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <account-edit :data="current" :visible.sync="showEdit" @done="reload" :btnindex="btnindex"/>
    <!-- 导出数据 -->
    <ExportDialog ref="ExportDialog"></ExportDialog>
    <!-- 二维码 -->
    <el-dialog :modal="false" title="人员二维码" :visible.sync="showQRCode" width="15%" :before-close="closeCode">
      <div style="margin:0 auto;width: 171px;height: 160px;" :v-loading="loading">
        <div id="qrCode" ref="qrCodeDiv" style="align-content: center;width: 100%;height: 100%;"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    import QRCode from "qrcodejs2";
    import AccountEdit from './components/account-edit';
    import AccountSearch from './components/account-search';
    import ExportDialog from '@/components/Excel/ExportDialog'
    import { AllAccount,DeleteAccount,ResetPassword } from '@/api/usermanager/accountmanager';
    export default {
      name: 'UserAccount',
      components: {AccountEdit,AccountSearch,ExportDialog},
      data() {
        return {
          // 表格列配置
          columns: [
            {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号',},
            {prop: 'account', label: '账户', showOverflowTooltip: true, sortable: 'account',},
            {prop: 'name', label: '真实姓名', showOverflowTooltip: true, sortable: 'name',},
            {prop: 'phone', label: '手机号', showOverflowTooltip: true, sortable: 'phone',},
            {prop: 'rolesDesc', label: '所属角色', showOverflowTooltip: true, },
            {prop: 'isBinding', label: '是否绑定账号', showOverflowTooltip: true, },
            {prop: 'createUserName', label: '创建人', showOverflowTooltip: true, align: 'left',sortable: 'createUserName',},
            {
              prop: 'createDate', label: '创建时间', showOverflowTooltip: true,  align: 'left',sortable: 'createDate',
              formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD");}
            },
            {prop: 'statusDesc', label: '状态', showOverflowTooltip: true, align: 'left',sortable: 'status',},
            {columnKey: 'action', label: '操作', width: 380, align: 'center', resizable: false,slot: 'action', hideInSetting: true, showOverflowTooltip: true}
          ],
          //操作按钮索引
          btnindex: '1',
          // 当前编辑数据
          current: null,
          // 是否显示编辑弹窗
          showEdit: false,
          // 全部账户数据
          accountList: [],
          //二维码是否展示
          showQRCode:false,
          ImgUrl:'',
          loading:false,
          // 导出列
          exportList: [
            { name: "账户", keys: "account", status: true },
            { name: "真实姓名", keys: "name", status: true },
            { name: "手机号码", keys: "phone", status: true },
            { name: "所属角色", keys: "rolesDesc", status: true },
            { name: '是否绑定账号', label: 'isBinding', status: true, },
            { name: "创建人", keys: "createUserName", status: true },
            { name: "创建时间", keys: "createDate", status: true },
            { name: "状态", keys: "statusDesc", status: true }
          ]
        };
      },
      methods: {
        /* 表格数据源 */
         async datasource(params) {
          params.where.pageindex = params.page;
          params.where.pagesize = params.limit;
  
          //添加排序
          if(params.order.order == null || params.order.order == undefined){
            params.where.orderBys = [{ sort: "createDate", order: 1, }];
          }else{
            params.where.orderBys = [];
            params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
          }
          let data = await AllAccount(params.where);

          return {
              list:data.items,
              count:data.totalrecords,
          };
        },
  
        /* 表格渲染完成回调 */
        onDone({ data }) {
          // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
          if(this.current) {
              Object.assign(this.current, data);
          }
        },
        /* 刷新表格 */
        reload(where) {
          this.$refs.table.reload({ where: where });
        },
        
        /**
         * 显示编辑
         * @param row 当前行对像
         */
        openEdit(row,index) {
          this.current = row;
          this.showEdit = true;
          this.btnindex = index;
        },
        resetPass(row){
          const loading = this.$loading({ lock: true });
          ResetPassword(row)
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            }); 
        },
        /* 删除 */
        remove(row) {
          const loading = this.$loading({ lock: true });
          DeleteAccount(row.id)
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        },
        /* 导出 */
        reportexcel(pams) {
          this.$refs.ExportDialog.showEdits = true
          this.$refs.ExportDialog.checkList = this.exportList
          this.$refs.ExportDialog.titleName = "账户列表"
          this.$refs.ExportDialog.dataList = this.$refs.table.tableData;
        },

        //生成二维码
        creatQrCode(row) {
          this.loading = true
          this.showQRCode = true;
          setTimeout(() => {
            this.qrCode(row);
          }, 1000);
          
        },
        
        qrCode(row) {
            let qrcode = new QRCode("qrCode", {
              text: "https://ypwx.csrongsuo.com/checkrule/account?id=1&inviterUserId=" + row.id, // 需要转换为二维码的内容
              width: 171,
              height: 160,
              colorDark: "#000000", //二维码颜色
              colorLight: "#ffffff", //二维码背景色
              correctLevel: QRCode.CorrectLevel.H, //容错率，L/M/H
            });
            this.loading = false;
        },

        // 关闭弹框,清除已经生成的二维码
        closeCode() {
          this.showQRCode = false;
          this.$refs.qrCodeDiv.innerHTML = "";
        },
      }
    };
  </script>
  